<script lang="ts" setup>
import { Card, Avatar, Rate, Tag, Button } from 'ant-design-vue';
// 使用 Ant Design 图标
import { EyeOutlined, EditOutlined } from '@ant-design/icons-vue';

const props = defineProps<{
  resource: any;
  type: 'dress' | 'artist' | 'photographer';
  showActions?: boolean;
}>();

const emit = defineEmits(['view', 'edit', 'select']);

const getImage = () => {
  if (props.type === 'dress') {
    return props.resource.images?.[0];
  }
  return props.resource.avatar;
};

const getName = () => {
  if (props.type === 'dress') return props.resource.dressName;
  if (props.type === 'artist') return props.resource.artistName;
  return props.resource.photographerName;
};

const getPrice = () => {
  if (props.type === 'dress') return props.resource.rentalPrice;
  return props.resource.servicePrice;
};
</script>

<template>
  <Card hoverable class="resource-card">
    <div v-if="type === 'dress'" class="dress-card">
      <img v-if="getImage()" :src="getImage()" class="w-full h-48 object-cover rounded mb-3" />
      <div class="font-medium text-base">{{ getName() }}</div>
      <div class="text-sm text-gray-500">{{ resource.brand }}</div>
      <div class="text-red-500 font-bold mt-2">¥{{ getPrice() }}</div>
      <Tag v-if="resource.status" class="mt-2" size="small">{{ resource.status }}</Tag>
    </div>
    
    <div v-else class="person-card">
      <div class="text-center mb-3">
        <Avatar :src="getImage()" :size="80">
          {{ getName()?.substring(0, 1) }}
        </Avatar>
      </div>
      <div class="font-medium text-base text-center">{{ getName() }}</div>
      <div class="flex items-center justify-center my-2">
        <Rate :value="resource.rating" disabled allow-half class="text-xs" />
        <span class="ml-1 text-xs text-gray-500">{{ resource.rating }}</span>
      </div>
      <Tag size="small">{{ resource.serviceLevel }}</Tag>
      <div class="text-red-500 font-bold mt-2 text-center">¥{{ getPrice() }}</div>
      <div class="text-xs text-gray-500 text-center mt-1">从业{{ resource.workYears }}年</div>
    </div>
    
    <div v-if="showActions" class="mt-3 flex justify-center space-x-2">
      <Button size="small" @click="emit('view', resource)">
        <template #icon><EyeOutlined /></template>
        详情
      </Button>
      <Button size="small" @click="emit('edit', resource)">
        <template #icon><EditOutlined /></template>
        编辑
      </Button>
    </div>
  </Card>
</template>

<style scoped>
.resource-card {
  transition: all 0.3s;
}
.resource-card:hover {
  transform: translateY(-4px);
}
</style>

